<template>
    <div class="detail" v-if="filmInfo">
        <!-- <div class="title"  v-title style="display:none">
            <div class="goback" @click="handlerback"><img src="../../img/2b.png" alt="" class="asd"></div>
            <div class="tt">{{filmInfo.name}}</div>
        </div> -->
        <m-title  v-title="40" @back="handlerbacks">
            {{filmInfo.name}}
        </m-title>
        <img :src="filmInfo.poster" alt="">
        <h4>{{filmInfo.name}} {{filmInfo.filmType.name}}</h4> 
        <p>{{filmInfo.premiereAt | dateFilter}}</p>
        <p>{{filmInfo.nation}}| </p><p>{{filmInfo.runtime}}</p>
        <p :class="{synopsis:isActive}">{{filmInfo.synopsis}}</p>
        <i class="iconfont  xiajian" @click="isActive=!isActive" :class="isActive?'icon-more_unfold':'icon-less'"></i>
            <h4>演职人员</h4>
<Swiper cName="actors" v-if="filmInfo.actors">
            <div
                v-for="(data,index) in filmInfo.actors"
                :key="data.name"
                class="swiper-slide"
                v-swiper="{
                    current:index,
                    length:filmInfo.actors.length,
                    swipe:'actors',
                    free:{
                        slidesPerView: 4,
                        spaceBetween: 10,
                        freeMode: true
                    }   
                }"
            >
                <div>
                    <img  class="actor-img" :src="data.avatarAddress" alt="">
                </div>
            </div>
        </Swiper>
        <div v-else>暂无演职人员</div>
        <h4 @click="isPhotoShow=true">剧照</h4>
        <Swiper cName="photos" v-if="filmInfo.photos">
            <div
                v-for="(data,index) in filmInfo.photos"
                :key="data"
                class="swiper-slide"
                @click="perviewImg(index)"
                v-swiper="{
                    current:index,
                    length:filmInfo.photos.length,
                    swipe:'photos',
                    free:{
                        slidesPerView: 2.4,
                        spaceBetween: 10,
                        freeMode: true
                    }   
                }"
            >
                <div>
                    <img :src="data" alt="">
                </div>
            </div>
        </Swiper>
        <div v-else>暂无剧照</div>
        <Photo v-show="isPhotoShow" :list="filmInfo.photos" @event="perviewImg">
            <m-title @back="handlePhoto">
                剧照（{{filmInfo.photos.length}}）
            </m-title>
        </Photo>
    </div>

</template>

<script>
import instance from "@/utils/http"
import Swiper from "@/components/Swiper"
import Photo from "./Detail/Photo"
import Vue from 'vue'
import { ImagePreview } from 'vant'
Vue.use(ImagePreview);
export default {
    components:{
        Swiper,
        Photo
    },
    data(){
        return {
            filmInfo:null,
            isActive:true,
            isPhotoShow:false
        }
    },
    methods:{
        handlerbacks(){
            this.$router.back()
        },
        handlePhoto(){
            this.isPhotoShow = false
        },
        perviewImg(index){
        ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        onClose() {
            // do something
        },  
                closeable:true,
                closeIconPosition:'top-left',
    });

        }
        // handlerback2(){
        //     console.log(123)
        // }
    },

    created(){
        instance.get(`/gateway?filmId=${this.$route.params.id}&k=8300462`,{
            headers:{
                'X-Host': 'mall.film-ticket.film.info'
            }
        }).then(res=>{

            this.filmInfo = res.data.data.film
        })
    },
    // mounted(){
    //     window.onscroll=()=>{
    //         if(document.documentElement.scrollTop>40){
    //             console.log('show')
    //         }else{
    //             console.log('hide')
    //         }
    //     }
    // },
    // beforeDestroy(){
    //     window.onscroll=null
    // }
}

</script>

<style lang="scss" scoped>
    img{
        width:100%;
    }
    .xiajian{
        position: absolute;
        left: 50%;
        transform: translateX(20%);
    }
    .synopsis{
        height: 40px;
        overflow: hidden;
    }
    .asd{
        display: flex;
        width: 300px;
        height: 400px;
        img{
            flex: 1;
            width: 20%;
        }
    }

</style>
